<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
if (!isset($_SESSION['patient_id'])) { header("Location: login.php"); exit(); }
include '../include/config.php';
$patient_id = $_SESSION['patient_id'];

// Handle POST submission
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $activity_date = $_POST['activity_date'];
    $activity_type = $_POST['activity_type'];
    $description = $conn->real_escape_string($_POST['description']);
    $duration = (int)$_POST['duration'];
    $calories = (int)$_POST['calories'];
    $mood = $_POST['mood'];
    $tags = $conn->real_escape_string($_POST['tags']);
    $location = $conn->real_escape_string($_POST['location']);
    
    $media_type = 'none';
    $media_path = '';
    $media_thumbnail = '';
    
    if (isset($_FILES['media_file']) && $_FILES['media_file']['error'] == 0) {
        $allowed = ['jpg','jpeg','png','gif','webp','mp4','mov','webm'];
        $ext = strtolower(pathinfo($_FILES['media_file']['name'], PATHINFO_EXTENSION));
        $upload_dir = '../uploads/patient_media/';
        if (!file_exists($upload_dir)) mkdir($upload_dir, 0777, true);
        $new_filename = time() . '_' . $patient_id . '.' . $ext;
        $upload_path = $upload_dir . $new_filename;
        if (move_uploaded_file($_FILES['media_file']['tmp_name'], $upload_path)) {
            if (in_array($ext, ['jpg','jpeg','png','gif','webp'])) {
                $media_type = 'image';
                $media_path = 'uploads/patient_media/' . $new_filename;
            } elseif (in_array($ext, ['mp4','mov','webm'])) {
                $media_type = 'video';
                $media_path = 'uploads/patient_media/' . $new_filename;
            }
        }
    }
    
    $stmt = $conn->prepare("INSERT INTO daily_activity (patient_id, activity_date, activity_type, description, duration, calories, mood, tags, location, media_type, media_path, media_thumbnail) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
    $stmt->bind_param("isssiissssss", $patient_id, $activity_date, $activity_type, $description, $duration, $calories, $mood, $tags, $location, $media_type, $media_path, $media_thumbnail);
    $stmt->execute();
    $stmt->close();
}

$activities = $conn->query("SELECT * FROM daily_activity WHERE patient_id = $patient_id ORDER BY activity_date DESC LIMIT 20");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Daily Activity Tracker - UHD</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <style>
        body {
            background: #0a3d2f;  /* dark green background */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar {
            background: #064e3b !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .card {
            border-radius: 20px;
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            background: rgba(255,255,255,0.95);
        }
        .card-header {
            border-radius: 20px 20px 0 0 !important;
            font-weight: bold;
            background: linear-gradient(135deg, #0f6b4c, #064e3b);
            color: white;
            padding: 15px 20px;
        }
        .btn-primary {
            background: #0f6b4c;
            border: none;
            padding: 10px;
            font-weight: bold;
            border-radius: 30px;
        }
        .btn-primary:hover {
            background: #0a523b;
            transform: translateY(-2px);
        }
        .form-control, .form-select {
            border-radius: 12px;
            padding: 10px 15px;
            border: 1px solid #cbd5e1;
        }
        .form-control:focus, .form-select:focus {
            border-color: #0f6b4c;
            box-shadow: 0 0 0 0.2rem rgba(15,107,76,0.25);
        }
        .activity-item {
            background: #f8fafc;
            border-radius: 15px;
            padding: 12px;
            margin-bottom: 12px;
            transition: all 0.2s;
            border-left: 5px solid #0f6b4c;
        }
        .activity-item:hover {
            transform: translateX(5px);
            background: #f1f5f9;
        }
        .mood-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 0.75rem;
            font-weight: bold;
        }
        .mood-happy { background: #d1fae5; color: #065f46; }
        .mood-neutral { background: #e2e8f0; color: #1e293b; }
        .mood-sad { background: #fee2e2; color: #991b1b; }
        .mood-anxious { background: #fef3c7; color: #92400e; }
        .mood-painful { background: #ffddd6; color: #9b2c1d; }
        @media (max-width: 768px) {
            .card-header h5 { font-size: 1.1rem; }
            .activity-item { padding: 10px; }
            .btn-primary { padding: 8px; }
        }
        .back-btn {
            background: rgba(255,255,255,0.2);
            border-radius: 30px;
            color: white;
            padding: 6px 16px;
            transition: 0.2s;
        }
        .back-btn:hover {
            background: rgba(255,255,255,0.3);
            color: white;
        }
        footer {
            text-align: center;
            padding: 20px;
            color: rgba(255,255,255,0.7);
            font-size: 0.8rem;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-dark">
    <div class="container">
        <span class="navbar-brand"><i class="fas fa-heartbeat me-2"></i> Daily Activity Tracker</span>
        <a href="dashboard.php" class="back-btn"><i class="fas fa-arrow-left me-1"></i> Dashboard</a>
    </div>
</nav>

<div class="container mt-4">
    <div class="row g-4">
        <!-- Form Column -->
        <div class="col-12 col-lg-5">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-plus-circle me-2"></i> Log New Activity
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="far fa-calendar-alt me-1"></i> Date</label>
                            <input type="date" name="activity_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="fas fa-tag me-1"></i> Activity Type</label>
                            <select name="activity_type" class="form-select" required>
                                <option>🏃‍♂️ Exercise</option>
                                <option>🍽️ Meal</option>
                                <option>💊 Medication</option>
                                <option>😴 Sleep</option>
                                <option>🏥 Checkup</option>
                                <option>📝 Other</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="fas fa-pen me-1"></i> Description</label>
                            <textarea name="description" class="form-control" rows="2" required placeholder="What did you do?"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold"><i class="far fa-clock me-1"></i> Duration (min)</label>
                                <input type="number" name="duration" class="form-control" placeholder="30">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold"><i class="fas fa-fire me-1"></i> Calories</label>
                                <input type="number" name="calories" class="form-control" placeholder="200">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="far fa-smile me-1"></i> Mood</label>
                            <select name="mood" class="form-select">
                                <option value="happy">😊 Happy</option>
                                <option value="neutral">😐 Neutral</option>
                                <option value="sad">😢 Sad</option>
                                <option value="anxious">😰 Anxious</option>
                                <option value="painful">😖 Painful</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="fas fa-map-marker-alt me-1"></i> Location</label>
                            <input type="text" name="location" class="form-control" placeholder="Home, Gym, Hospital">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold"><i class="fas fa-tags me-1"></i> Tags (comma separated)</label>
                            <input type="text" name="tags" class="form-control" placeholder="cardio, morning, healthy">
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-semibold"><i class="fas fa-upload me-1"></i> Photo / Video</label>
                            <input type="file" name="media_file" class="form-control" accept="image/*,video/*">
                            <small class="text-muted">JPG, PNG, GIF, MP4 (max 50MB)</small>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-save me-2"></i> Save Activity
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- History Column -->
        <div class="col-12 col-lg-7">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-history me-2"></i> Recent Activities
                </div>
                <div class="card-body p-3" style="max-height: 600px; overflow-y: auto;">
                    <?php if ($activities && $activities->num_rows > 0): ?>
                        <?php while($a = $activities->fetch_assoc()): ?>
                            <div class="activity-item">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <strong><i class="far fa-calendar-check me-1 text-success"></i> <?= date('M d, Y', strtotime($a['activity_date'])) ?></strong>
                                        <span class="badge bg-secondary ms-2"><?= $a['activity_type'] ?></span>
                                        <div class="mt-1">
                                            <span class="mood-badge mood-<?= $a['mood'] ?>">
                                                <?php 
                                                    $mood_icon = ['happy'=>'😊','neutral'=>'😐','sad'=>'😢','anxious'=>'😰','painful'=>'😖'];
                                                    echo $mood_icon[$a['mood']] ?? '😐'; 
                                                ?> <?= ucfirst($a['mood']) ?>
                                            </span>
                                        </div>
                                    </div>
                                    <?php if($a['duration']): ?>
                                        <small class="text-muted"><i class="far fa-clock"></i> <?= $a['duration'] ?> min</small>
                                    <?php endif; ?>
                                </div>
                                <p class="mt-2 mb-1"><?= htmlspecialchars($a['description']) ?></p>
                                <?php if($a['calories']): ?>
                                    <small><i class="fas fa-fire text-danger"></i> <?= $a['calories'] ?> cal</small>
                                <?php endif; ?>
                                <?php if($a['location']): ?>
                                    <small class="ms-2"><i class="fas fa-map-marker-alt text-info"></i> <?= htmlspecialchars($a['location']) ?></small>
                                <?php endif; ?>
                                <?php if($a['tags']): ?>
                                    <div class="mt-1"><small><i class="fas fa-tags text-secondary"></i> <?= htmlspecialchars($a['tags']) ?></small></div>
                                <?php endif; ?>
                                <?php if($a['media_type'] == 'image' && $a['media_path']): ?>
                                    <div class="mt-2">
                                        <img src="../<?= $a['media_path'] ?>" class="img-fluid rounded" style="max-height: 120px;" alt="activity">
                                    </div>
                                <?php elseif($a['media_type'] == 'video' && $a['media_path']): ?>
                                    <div class="mt-2">
                                        <video controls style="max-height: 120px;">
                                            <source src="../<?= $a['media_path'] ?>">
                                        </video>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <div class="text-center py-4">
                            <i class="fas fa-walking fa-3x text-muted mb-2"></i>
                            <p class="text-muted">No activities recorded yet. Start tracking your health!</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<footer>
    <i class="fas fa-heartbeat me-1"></i> UHD Hospital – Your wellness companion
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>